<%--
  Created by IntelliJ IDEA.
  User: YRZ
  Date: 2020/10/9
  Time: 9:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.css" />

    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/js/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/respond.min.js"></script>
    <![endif]-->
</head>
<title>班级管理</title>
<body class="sticky-header" style="background: #e4e7ea">

<section>
    <div>
        <button class="button" onclick="addClass()">新增用户</button>
        <%--用于条件搜索--%>
        <div class="btn-group pull-right">
            <input type="text" id="searchInput" placeholder="请根据班级名字查询">
            <button class="button" onclick="selectOneUser()">搜索</i>
            </button>
        </div>
    </div>
    <div>
        <table class="table table-striped table-hover table-bordered" id="editable-sample">
            <thead><tr>
                <td style="width: 100px">编号</td>
                <td style="width: 100px">班级名称</td>
                <td style="width: 110px">人数</td>
                <td style="width: 300px">班主任</td>
                <td style="width: 100px">操作</td>
                <td style="width: 70px">关于课程</td>
            </tr></thead>
            <tbody id="tb1">

            </tbody>
        </table>
    </div>

    <div class="margin">
        每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
        <option value="2" selected="selected">2</option>
        <option value="5">5</option>
        <option value="10">10</option>
    </select>条数据，当前是第<span id="currentPageSpan"></span>页
        总共<span id="totalPageSpan"></span>页
        <button class="button" onclick="firstPage()">首页</button>
        <button class="button" onclick="prePage()">上一页</button>
        <button class="button" onclick="nextPage()">下一页</button>
        <button class="button" onclick="lastPage()">尾页</button>
    </div>

    <div class="modal" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>班级信息编辑</h4>
                </div>
                <div class="modal-body">
                    <label class="control-label">班级名称</label>
                    <input class="form-control" type="text" id="classnameInput" placeholder="请输入班级名称">
                    <label class="control-label">人数</label>
                    <input class="form-control" type="text" id="numInput" placeholder="请输入班级人数">
                    <label class="control-label">班主任</label>
                    <input class="form-control" type="text" id="headmasterInput" placeholder="请输入班主任姓名">
                    <input type="hidden" id="classIdInput">
                </div>
                <div class="modal-footer">
                    <button class="button" data-dismiss="modal">取消</button><button class="button" onclick="ediConfirm()">确定</button>
                </div>
            </div>
        </div>

    </div>
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<!--script for editable table-->
<script src="${pageContext.request.contextPath}/static/js/editable-table.js"></script>
<script>
    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 2;
    //总共有多少页
    var totalPage;
    // 从地址栏获取班级id
    var collegeId=${param.collegeId};
    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        loadListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }
    //上一页回调方法
    function prePage() {
        currentPage--;
        if (currentPage<1){
            currentPage = 1;
        }
        loadListByPage()
    }
    //下一页回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage){
            currentPage = totalPage;
        }
        loadListByPage();
    }
    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }
    $(function () {
        // loadList();
        loadListByPage();
    });

    // 新增班级
    function addClass() {
        showEditModal();
    }

    // 搜索
    function selectOneUser(classname) {
        var classname = $("#searchInput").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/class/selectone",
            type:'get',
            contentType:'application/x-www-form-urlencoded',
            data:{
                "classname":classname,
            },
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showList(result.selectdd);
                }else {
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    // 编辑页面
    function showEditModal(classone) {
        if (classone!=null){
            $("#classIdInput").val(classone.classId);
            $("#classnameInput").val(classone.name);
            $("#numInput").val(classone.num);
            $("#headmasterInput").val(classone.headmaster);
            $("#classnameInput").attr("disabled","disabled");
        }else {
            $("#classIdInput").val(0);
            $("#classnameInput").val("");
            $("#numInput").val(0);
            $("#headmasterInput").val("");
            $("#classnameInput").removeAttr("disabled");
        }
        $("#editModal").modal("show");
    }

    // 确定编辑
    function ediConfirm() {
        var classIdvalue = $("#classIdInput").val();
        var classnamevalue = $("#classnameInput").val();
        var numvalue = $("#numInput").val();
        var headmastervalue = $("#headmasterInput").val();
        var  datavalue = {classId:classIdvalue,name:classnamevalue,num:numvalue,headmaster:headmastervalue,collegeId:collegeId};
        $.ajax({
            url:"${pageContext.request.contextPath}/class/edit",
            type:'post',
            contentType:'application/x-www-form-urlencoded',
            data:datavalue,
            dataType: 'json',
            success:function (result) {
                if (result.code == 0){
                    $("#editModal").modal("hide");
                    loadListByPage();
                }else {
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    // 遍历数据库班级数据
    function showList(classList) {
        var html = '';
        for(var i=0;i<classList.length;i++){
            var item = classList[i];

            html+="<tr>";
            html+="<td>"+item.classId+"</td>";
            html+="<td>"+item.name+"</td>";
            html+="<td>"+item.num+"</td>";
            html+="<td>"+item.headmaster+"</td>";
            html+="<td><button class='button' onclick='getCollegeDatail(\""+item.classId+"\")'>编辑</button>" +"&nbsp"+"&nbsp"+"&nbsp"+
                "<button class='button' onclick='deleteOneCollege(\""+item.classId+"\")'>删除</button></td>";
            html+="<td><button class='button' onclick='getClassName(\""+item.collegeId+"\")'>编辑</button></td>"
            html+="<tr>";
        }
        $("#tb1").html(html);
    }
    // 编辑页面
    function getCollegeDatail(classId){
        $.ajax({
            url:"${pageContext.request.contextPath}/class/gettow",
            type:'get',
            data:{
                "classId":classId,
            },
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showEditModal(result.classone);
                }else {
                    alert(result.message);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }

    // 删除页面
    function deleteOneCollege(classId) {
        $.ajax({
            url:"${pageContext.request.contextPath}/class/delete",
            type:'get',
            contentType:'application/x-www-form-urlencoded',
            data:{
                "classId":classId,
            },
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    loadListByPage();
                }
                alert(result.message);
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }

    function  loadListByPage(){
        $.ajax({
            url:"${pageContext.request.contextPath}/class/getlistByPage",
            type:'get',
            data:{
                "collegeId":collegeId,
                "currentPage":currentPage,
                "pageSize":pageSize
            },
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    totalPage = result.totalPage;
                    showList(result.classList);
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }

    function  loadList(){
        $.ajax({
            url:"${pageContext.request.contextPath}/college/getlist",
            type:'get',
            dataType:'json',
            success:function (result) {
                if(result.code==0){
                    showList(result.collegeList);
                }

            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }

    function getClassName(collegeId) {
        window.location.href="${pageContext.request.contextPath}/subject/subjectView?collegeId="+collegeId;//此处为自己的jsp文件路径
    }

</script>
</body>
</html>
